<template>
  <div class="app-container">
    <!-- :inline="true"表示行内表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <!-- v-model为什么绑定叫hosname和hoscode的属性，因为后端由@RequestBody修饰的实体类HospitalSetQueryVo正好就是这两个属性，名字必须和
          HospitalSetQueryVo的属性名保持一致，这样才能把前端传的数据绑定到HospitalSetQueryVo实体中 -->
        <el-input v-model="searchObj.cname" placeholder="竞赛名称" />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()"
        >查询</el-button
      >

      <!-- 添加按钮 -->
      <!-- <router-link :to="'/admin/save'"> -->
        <el-button
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-edit" 
          @click="openEdit(null)"
        >
          发布竞赛
        </el-button>
      <!-- </router-link> -->
    </el-form>

    <!-- banner列表 -->
    <el-table :data="list" stripe style="width: 100%"  >
      <!-- <el-table-column type="index" width="50"/> -->
      <el-table-column prop="id" label="竞赛编号" />
      <el-table-column prop="cname" label="竞赛名称" />
      <el-table-column prop="year" label="年度" width="200" />
      <el-table-column prop="content" label="竞赛内容" />
      <el-table-column prop="date" label="竞赛日期" />
      <el-table-column prop="norm" label="竞赛规范" />
      <!-- 操作栏 -->
      <el-table-column label="操作" width="280" align="center">
        <!-- slot-scope="scope"表示当前行所在的域 -->
        <template slot-scope="scope">
          <!-- scope.row表示当前行这个对象  scope.row.id表示当前行的id,但是list里边的每一个对象只有cid，没有id，所以这里要用scope.row.cid
            才能把cid传到后端-->
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id)"
          >
          </el-button>
          &nbsp;
          <!-- 路由跳转(编辑按钮)当被点击后，内部会立刻把 to 的值传到 router.push() -->
          
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="openEdit(scope.row.id)">修改</el-button>
          
          &nbsp;
        </template>
      </el-table-column>

      
    </el-table>

    <!-- 分页 -->
    <!--:current-page是当前页，改成current,前边有冒号，是v-bind，所以冒号里写js表达式  -->
    <!-- @current-change是element-ui的一个事件，切换分页的时候触发 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <!-- 添加操作弹出框 -->
    <!-- @close="clearForm" close是人家el-dialog组件定义的一个Dialog 关闭动画结束时的回调，就是点击叉号或确定按钮或取消按钮关闭对话框后
    清空之前在对话框输入的内容 -->
    <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
      <!-- 做表单验证的时候注意点：1.要在表单组件上加:rules="rules" 2.在data里定义rules  3.在每个el-form-item组件上加prop属性，注意
      data里的rules对象里有一个cname数组，就代表要对prop叫cname的el-form-item里的内容做校验，所以rules里的数组叫什么，prop就要叫什么，二者要
    对应上 -->

    <!-- 上边的校验是比较常见的校验，如非空校验，长度校验，所以校验规则人家都给你定义好了，比如required: true，min: 3, max: 5等
    还存在一些特殊的需求的校验就要写自定义校验，方法和上边3条差不多，只是在2里多了一个在data里定义自定义校验函数，并在rules的数组中用
  validator: 函数名  来关联，我们的登录界面就有一个自定义校验，是这个前端模版给你写好的 -->
      <el-form :model="com" :rules="rules" ref="comForm">

        <el-form-item label="竞赛名称" :label-width="formLabelWidth" prop="cname">
          <el-input v-model="com.cname" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="年度" :label-width="formLabelWidth">
            <el-input v-model="com.year" autocomplete="off"/>
        </el-form-item>

        <el-form-item label="竞赛内容" :label-width="formLabelWidth">
            <el-input v-model="com.content" autocomplete="off"/>
        </el-form-item>

        <el-form-item label="竞赛日期" :label-width="formLabelWidth">
        

            <el-date-picker
              v-model="com.date"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>

        
        <!-- <el-form-item label="竞赛日期">
            <el-input v-model="com.date"/>
        </el-form-item> -->

        <el-form-item label="竞赛规范" :label-width="formLabelWidth">
            <el-input v-model="com.norm" autocomplete="off"/>
        </el-form-item>

        <!-- 如果你的项目里有添加的字段有状态之类的可以用下边的代码:active-value="1"就代表打开就是1 -->
        <!-- <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch 
              v-model="com.status"
              :active-value="1"
              :inactive-value="0">
              
            </el-switch>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateCom">确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
//前后端交互：在vue文件中导入hospitalset.js，这些js文件里写了和后端接口交互的函数，调用这些函数，就能实现前后端数据交互
//记住：前后端交互是靠写的js文件里的函数，而跟router/index.js里配的路由没一点关系，路由只负责前端点哪个按钮跳到哪个组件而已
import admin from "@/api/admin";
export default {
  data() {
    return {
      title:"",
      dialogFormVisible:false,
      com:{},
      rules:{
        cname: [
            { required: true, message: '请输入竞赛名称', trigger: 'blur' },//非空校验 trigger: 'blur'意思是在失去焦点的时候触发
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } 长度校验，这里不需要
            //{ validator: 函数名, trigger: 'blur' } 自定义校验写法，这个函数要写在data里
          ],
      },
      formLabelWidth: '130px',
      current: 1, //当前页
      limit: 5, //每页显示记录数
      searchObj: {}, //条件封装对象
      list: [], //当前页的数据集合
      total: 0, //总记录数
    };
  },
  created() {
    //获取数据
    this.fetchData();
  },
  //无分页
  // methods:{
  //   fetchData(){//axios已经在utils/request.js里封装好了，然后hospitalset.js引入request.js，这里又引入hospitalset.js，所以这里不用写axios了
  //     hospSet.getList().then(Response=>{
  //       //Response：被axios响应拦截器处理后的结果，是Result对象
  //       //console.log(Response);
  //       this.list=Response.data
  //     })
  //   }
  // }

  //带分页
  methods: {
    openEdit(id){
      if(id==null){
        this.title='发布竞赛';
      }else{
        this.title='修改竞赛';
        admin.getCom(id).then(response=>{
                this.com= response.data;
            })

      }
      
      this.dialogFormVisible=true
    },
    //清空表单
    clearForm(){
      //清空表单数据
      this.com={}//当你在对话框输入内容后this.com就不是空了，当关闭对话框后要重新初始化

      //清空表单的校验结果
      // 通过this.$refs可以引用一个表单，有两种写法，this.$refs.comForm和this.$refs['comForm']都可以，然后clearValidate()函数就是清空校验结果  
      this.$refs.comForm.clearValidate();
    },
    saveOrUpdateCom(){
      //先触发表单验证
      //为什么点击确定要走这个函数呢？因为我们的表单验证的触发条件都是失去焦点时触发，什么叫失去焦点，你必须先获取焦点才能失去焦点，就是你必须
      //先点击输入框，不输内容再点走才能触发表单校验，如果你什么都不点直接提交，这个过程是没有失去焦点过程的，所以就不会触发表单校验，怎么才能
      //自动校验呢？用validate函数，作用是对整个表单进行校验，这样在没有失去焦点的情况下也会进行校验
      this.$refs.comForm.validate((valid) => {//valid是验证结果，布尔类型
          if (valid) {
            //验证通过之后，把表单数据传给后端
            admin.saveOrUpdate(this.com).then(response=>{
                //提示
                this.$message({
                    type:'success',
                    message:response.message
                })
                //关闭对话框
                this.dialogFormVisible=false
                //跳转列表页面 使用路由跳转方式实现
                this.fetchData();
            }) 
          } else {//校验不通过，重新输入
            return false;
          }
        });
    },
    fetchData(current = 1) {
      //上边created钩子调fetchData函数如果没有传参数就默认current为1,若传了2，那就是this.curremt=2,1就没用了
      this.current = current;
      admin.getPageList(this.current, this.limit, this.searchObj).then((response) => {
          //Response：被axios响应拦截器处理后的结果，是Result对象,并不是原始的response，而是原始的response中的data，即Result对象
          //console.log(response);
          // response.data是Result对象的data属性，这个data是后端自己定义的，它就是Page对象
          this.list = response.data.records; //records是IPage里的
          this.total = response.data.total;
          console.log(response);
        });
    },

    //删除
    removeDataById(id) {
      this.$confirm("此操作将删除竞赛信息,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //确定后执行then方法
        admin.deleteCom(id).then((response) => {
          //提示
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          //刷新页面(再次调用查询列表带分页的接口)
          this.fetchData();
        });
      });
    },
  },
};
</script>
  
  <style>

  .el-dialog .el-input{
    width: 85%;
  }
</style>